---
title: Aliasy
description: Wprowadzenie do aliasów z Astro.
i18nReady: true
---

**Alias** jest sposobem na tworzenie skrótów dla twoich importów.

Aliasy mogą ułatwić pracę z kodem zawierającym wiele folderów i relatywnych importów.

```astro title="src/pages/about/company.astro" del="../../components" del="../../assets"
---
import Button from '../../components/controls/Button.astro';
import logoUrl from '../../assets/logo.png?url';
---
```

W tym przykładzie, programista musiałby zrozumieć relację pomiędzy `src/pages/about/company.astro`, `src/components/controls/Button.astro` i `src/assets/logo.png`. Potem, jeśli `company.astro` zmieniłoby swoją lokalizację, importy te także musiałyby zostać zaktualizowane.

Możesz dodać aliasy dla importów w pliku `tsconfig.json` lub `jsconfig.json`.

```json title="tsconfig.json" ins={5-6}
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@assets/*": ["src/assets/*"]
    }
  }
}
```

:::note
Upewnij się, że `compilerOptions.baseUrl` jest ustawione. Dzięki temu, ścieżki aliasowe będą mogły być rozwiązane.
:::

Dzięki tej zmianie, możesz teraz importować używając aliasów gdziekolwiek w twoim projekcie:

```astro title="src/pages/about/company.astro" ins="@components" ins="@assets"
---
import Button from '@components/controls/Button.astro';
import logoUrl from '@assets/logo.png?url';
---
```

Aliasy te są także automatycznie zintegrowane w [VS Code](https://code.visualstudio.com/docs/languages/jsconfig) i innych edytorach tekstu.
